<template>
  <div class="pages_content table">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main style="display: flex">
        <div>
          <div class="tabtop" style="width:380px;">
            <div v-for="(item, index) in contractTypelist" :key="index" @click="choose(item.status)">
              <div :class="currenindex == item.status ? 'active' : 'text'">{{ item.value }}</div>
            </div>
          </div>
          <div v-if="currenindex==1">
            <div class="header_right" @click="showCardNav = !showCardNav">
              <div class="title">搜索</div>
              <div>
                <transition name="from"></transition>
                <span v-show="!showCardNav">
                  <i style="margin-right: 5px" class="el-icon-arrow-down"></i>
                </span>
                <transition name="to"></transition>
                <span v-show="showCardNav">
                  <i style="margin-right: 5px" class="el-icon-arrow-up"></i>
                </span>
              </div>
            </div>
            <div v-show="showCardNav" class="hr"></div>
            <el-collapse-transition>
              <div v-show="showCardNav">
                <div class="search">
                  <span style="display: inline-block;margin-bottom: 10px;">
                    <span style="margin-right: 12px">工程名称</span>
                    <el-select ref="engineeringName" v-model="tableParam.engineeringId" placeholder="请选择" @change="$forceUpdate(),gettableData()">
                      <el-option v-for="(item,k) in engineeringIdList" :key="k" :label="item.engineeringName" :value="item.engineeringId"></el-option>
                    </el-select>
                  </span>
                  <span style="margin-left: 24px">
                    <span style="margin-right: 12px">产品名</span>
                    <el-input v-model="tableParam.productName" style="width: 240px" clearable placeholder="请输入" @keyup.enter.native="gettableData()" />
                  </span>
                  <span style="margin-left: 24px">
                    <span style="margin-right: 12px">状态</span>
                    <el-select v-model="tableParam.status" placeholder="请选择">
                      <el-option label="待处理" :value="1"></el-option>
                      <el-option label="已交工" :value="2"></el-option>
                    </el-select>
                  </span>
                  <el-button icon="el-icon-search" size="medium" class="bottom_all" @click="(tableParam.page = 1), gettableData()">查 询</el-button>
                  <el-button size="medium" class="bottom_all_two" style="margin-left: 12px" @click="init()">重 置</el-button>
                </div>
              </div>
            </el-collapse-transition>
            <div class="hr"></div>
            <div class="card">
              <div class="card_nav">
                <div>
                  <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='DAOCJGZL'))!==-1" size="small" class="bottom_three" :disabled="tableDataSelect.length==0" @click="prinDeriveFun(2)">
                    <i class="iconfont iconicon_button_export1" style="font-size:12px"></i>
                    导出开盘资料
                  </el-button>
                  <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='DAYJGZL'))!==-1" size="small" class="bottom_three" :disabled="tableDataSelect.length==0">
                    打印开盘资料
                  </el-button>
                  <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='SHENCJGZL'))!==-1" size="small" class="bottom_three" :disabled="tableDataSelect.length==0" @click="look3Fun(2)">
                    生成交工资料
                  </el-button>
                </div>
                <div>
                  <el-dropdown :hide-on-click="false" trigger="click" style="margin: 0 20px">
                    <el-link :underline="false">
                      <span class="el-icon--left">
                        <i class="iconfont iconicon_button_filtrate"></i>
                      </span>
                      筛选
                    </el-link>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item v-for="(item, index) in table" :key="index">
                        <el-checkbox v-model="item.status">{{
                          item.label
                          }}</el-checkbox>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </div>
              <div v-loading="tableLoading" class="card_info" :style="style">
                <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="tableData" tooltip-effect="dark" @selection-change="list1SelectionFun">
                  <el-table-column type="selection" width="55">
                  </el-table-column>
                  <template v-for="(item, index2) in table">
                    <el-table-column v-if="item.status" :key="index2" :label="item.label" align="center" :width="item.width">
                      <template slot-scope="scope">
                        <span v-if="item.label == '产品名'">
                          <span v-if="scope.row.productDeployStatus == 1" class="table_link" style="color:red;" @click="$refs.ProduceCoordinate.look1Fun(scope.row)">{{scope.row.productName}}(待配置)</span>
                          <span v-else class="table_link" @click="$refs.ProduceCoordinate.look1Fun(scope.row)">{{scope.row.productName}}(已配置)</span>
                        </span>
                        <span v-else-if="item.label == '配合比'">
                          <span v-if="scope.row.mixRatioDeployStatus == 1" class="table_link" style="color:red;" @click="$refs.ProduceCoordinate.look2Fun(scope.row,false)">待配置</span>
                          <span v-else class="table_link" @click="$refs.ProduceCoordinate.look2Fun(scope.row,true)">已配置</span>
                        </span>
                        <span v-else-if="item.label == '打印记录'">
                          <span class="table_link" @click="open('dialog1',scope.row)">查看</span>
                        </span>
                        <span v-else-if="item.label == '状态'">
                          <span v-if="scope.row.handOverStatus == 1" style="color: #969799">待处理</span>
                          <span v-if="scope.row.handOverStatus == 2" style="color: #00a754">已交工</span>
                        </span>
                        <span v-else>{{ scope.row[item.prop] }}</span>
                      </template>
                    </el-table-column>
                  </template>
                </el-table>
              </div>
              <div class="card_bottom">
                <div class="card_bottom_left">
                  <div class="top_page_totle">总共{{ total }}条</div>
                  <el-pagination :current-page.sync="tableParam.page" :page-size="tableParam.pageSize" layout="prev, pager, next, jumper" :total="total" @current-change="gettableData()"></el-pagination>
                </div>
                <div>
                  <el-button size="mini" icon="el-icon-refresh-right" class="bottom_all_two" @click="gettableData">刷新</el-button>
                </div>
              </div>
            </div>
          </div>
          <DataCompletion v-if="currenindex==2"></DataCompletion>
        </div>
      </el-main>
    </el-container>
    <!-- 查看 -->
    <el-dialog v-dialogDrag :visible.sync="dialog1" width="880px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">打印及导出记录</span>
      <div class="dialogOtherinfo">
        <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="table1" tooltip-effect="dark">
          <el-table-column prop="openingTime" label="序号" width="120" align="center"></el-table-column>
          <el-table-column prop="endingTime" label="记录类型" width="auto" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.type == 1">打印</span>
              <span v-if="scope.row.type == 2">导出</span>
            </template>
          </el-table-column>
          <el-table-column prop="createUserName" label="操作人" width="120" align="center"></el-table-column>
          <el-table-column prop="createTime" label="操作时间" width="auto" align="center"></el-table-column>
        </el-table>
        <el-pagination :current-page.sync="tableParam1.page" :page-size="tableParam1.pageSize" layout="prev, pager, next, jumper" :total="total1" @current-change="getmaintenancelist()"></el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="dialog1=false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 生成交工资料 -->
    <el-dialog v-dialogDrag :visible.sync="look3Type" width="600px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">生成交工资料</span>
      <div class="dialogOtherinfo">
        <el-form ref="look3form" :model="look3form" label-width="110px" :hide-required-asterisk="true">
          <el-form-item prop="stationId0" :rules="[{required: true,message: '请选择站点名称',trigger: 'change',}]">
            <span slot="label" style="color:#FF0000;">站点名称</span>
            <el-cascader ref="stationName" v-model="look3form.stationId0" style="width:380px;" :options="stationIdList" :show-all-levels="false" collapse-tags @change="$nextTick(()=>{look3form.stationName =$refs.stationName.getCheckedNodes()[0].label,look3form.stationId =$refs.stationName.getCheckedNodes()[0].value,look3form.company =$refs.stationName.getCheckedNodes()[0].pathLabels[0],look3form.companyId =$refs.stationName.getCheckedNodes()[0].path[0]})"></el-cascader>
          </el-form-item>
          <el-form-item prop="content" :rules="[{required: true,message: '请输入交工资料内容',trigger: 'change',}]">
            <span slot="label" style="color:#FF0000;">交工资料内容</span>
            <el-input v-model="look3form.content" placeholder="请输入" style="width:380px;"></el-input>
          </el-form-item>
          <el-form-item prop="handOverEngineeringName" :rules="[{required: true,message: '请输入交工工程名称',trigger: 'change',}]">
            <span slot="label" style="color:#FF0000;">交工工程名称</span>
            <el-input v-model="look3form.handOverEngineeringName" placeholder="请输入" style="width:380px;"></el-input>
          </el-form-item>
          <el-form-item prop="handOverRoadwork" :rules="[{required: true,message: '请输入交工施工单位',trigger: 'change',}]">
            <span slot="label" style="color:#FF0000;">交工施工单位</span>
            <el-input v-model="look3form.handOverRoadwork" placeholder="请输入" style="width:380px;"></el-input>
          </el-form-item>
          <el-form-item prop="signerId0" :rules="[{required: true,message: '请选择签发人',trigger: 'change',}]">
            <span slot="label" style="color:#FF0000;">签发人</span>
            <el-cascader ref="signerId0" v-model="look3form.signerId0" style="width:380px;" :options="signerIdList" :show-all-levels="false" :props="{ value:'id',label: 'name'}" collapse-tags @change="$nextTick(()=>{look3form.signer =$refs.signerId0.getCheckedNodes()[0].label,look3form.signerId =$refs.signerId0.getCheckedNodes()[0].value})"></el-cascader>
          </el-form-item>
          <el-form-item prop="checkOneId0" :rules="[{required: true,message: '请选择校核人',trigger: 'change',}]">
            <span slot="label" style="color:#FF0000;">校核人</span>
            <el-cascader ref="checkOneId0" v-model="look3form.checkOneId0" style="width:380px;" :options="signerIdList" :show-all-levels="false" :props="{ value:'id',label: 'name'}" collapse-tags @change="$nextTick(()=>{look3form.checkOne =$refs.checkOneId0.getCheckedNodes()[0].label,look3form.checkOneId =$refs.checkOneId0.getCheckedNodes()[0].value})"></el-cascader>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="look3Type = false">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px;" @click="submit3()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 生成交工资料 -->
    <el-dialog v-dialogDrag :visible.sync="look4Type" width="600px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">生成交工资料</span>
      <div class="dialogOtherinfo">
        <el-form ref="look4form" :model="look4form" label-width="110px" :hide-required-asterisk="true">
          <el-form-item prop="signerId0" :rules="[{required: true,message: '请选择签发人',trigger: 'change',}]">
            <span slot="label" style="color:#FF0000;">签发人</span>
            <el-cascader ref="signerId0" v-model="look4form.signerId0" style="width:380px;" :options="signerIdList" :show-all-levels="false" :props="{ value:'id',label: 'name'}" collapse-tags @change="$nextTick(()=>{look4form.signerSignature =$refs.signerId0.getCheckedNodes()[0].data.signatureImg})"></el-cascader>
          </el-form-item>
          <el-form-item prop="checkOneId0" :rules="[{required: true,message: '请选择校核人',trigger: 'change',}]">
            <span slot="label" style="color:#FF0000;">校核人</span>
            <el-cascader ref="checkOneId0" v-model="look4form.checkOneId0" style="width:380px;" :options="signerIdList" :show-all-levels="false" :props="{ value:'id',label: 'name'}" collapse-tags @change="$nextTick(()=>{look4form.checkOneSignature =$refs.checkOneId0.getCheckedNodes()[0].data.signatureImg})"></el-cascader>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="look4Type = false">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px;" @click="submit4()">确 定</el-button>
      </span>
    </el-dialog>
    <ProduceCoordinate ref="ProduceCoordinate" :status="1" @gettableData="gettableData"></ProduceCoordinate>
  </div>
</template>

<script>
import mixin from "@/mixins/ICPSmixin.js";
import {
  queryPage,
  batchUpdateOrDelete,
  updateSortNum,
  saveOrUpdate,
  Download,
  signOfPrintLog,
  // signOfPrintLogSave,
  queryEngineeringList,
  handOverInformationsaveResord,
  exportTende,
} from "@/api/smart/data.js";
import produceCoordinate from "./components_data/produce_coordinate"//引入产品名和配合比的内容组件
import dataCompletion from "./components_data/dataCompletion"//引入交工资料
import { getUserAutList, orgUserTree } from "@/api/common.js";
import { getUserInfo } from "@/utils/auth.js";
export default {
  components: {//启动组件
    ProduceCoordinate: produceCoordinate,
    DataCompletion: dataCompletion
  },
  mixins: [mixin],
  data() {
    return {
      exportTende: exportTende,
      engineeringIdList: [],
      currenindex: 1,
      contractTypelist: [
        {
          value: "配置列表",
          status: 1,
        },
        {
          value: "交工资料",
          status: 2,
        },
      ],
      UserInfo: '',
      /*表格增删改查及下载接口*/
      queryPage: queryPage,
      batchUpdateOrDelete: batchUpdateOrDelete,
      updateSortNum: updateSortNum,
      saveOrUpdate: saveOrUpdate,
      DownloadURL: Download,
      /*表格数据*/
      table: [
        { label: "订单编号", width: "auto", prop: "orderNo", status: true },
        { label: "工程名称", width: "120", prop: "engineeringName", status: true },
        { label: "工程地址", width: "auto", prop: "place", status: true },
        { label: "浇筑部位", width: "120", prop: "structuralParts", status: true },
        { label: "产品名", width: "160", prop: "productName", status: true },
        { label: "配合比", width: "80", prop: "", status: true },
        { label: "交工配合比编号", width: "120", prop: "mixRatioNumber", status: true },
        { label: "报告时间", width: "120", prop: "reportTime", status: true },
        { label: "浇筑时间", width: "160", prop: "pouringTime", status: true },
        { label: "状态", width: "120", prop: "", status: true },
        { label: "打印记录", width: "120", prop: "", status: true },
      ],
      pagesType: 0,
      /*添加表单数据*/
      rules: {
        code: [{ required: true, message: "请输入站点编码", trigger: "blur" }],
      },
      fromDate: {
        code: "",
      },
      /*查看*/
      dialog1: false,
      table1: [],
      tableParam1: {
        page: 1,
        pageSize: 12,
      },
      total1: 0,
      form3: [],
      table2: [],
      /*配合比*/
      dialog3: false,
      tableParam3: {
        page: 1,
        pageSize: 12,
      },
      total3: 0,
      tableDataSelect: [],
      look3Type: false,
      look3form: {
        stationId0: [],
        signerId0: [],
        checkOneId0: [],
      },
      look4Type: false,
      look4form: {
        stationId0: [],
        signerId0: [],
        checkOneId0: [],
      },
      stationIdList: [],
      signerIdList: [],
      checkOneIdList: [],
      idList: [],
    };
  },
  async created() {
    this.UserInfo = await getUserInfo();
    this.tableParam = { ...this.tableParam, name: "", code: "" };
    this.stationIdList = await getUserAutList()
    console.log(this.stationIdList);
    //获取当前账号公司id的组织树
    this.signerIdList = await orgUserTree(this.UserInfo.companyId);
    console.log(JSON.parse(JSON.stringify(this.signerIdList)))
    queryEngineeringList().then((res) => {
      this.engineeringIdList = res.data
      if (res.data.length > 0) {
        this.tableParam.engineeringId = res.data[0].engineeringId
      }
      this.gettableData();
    })
  },
  methods: {
    submit4() {
      this.$refs.look4form.validate((valid) => {
        if (valid) {
          let idListArr = this.idList.map(res => (res.id))
          this.look4form.idList = idListArr
          this.$Download(this.exportTende, this.look4form);
        }
      });
    },
    choose(num) {
      this.currenindex = num;
      // this.tableParam.status = this.currenindex
      // this.gettableData();
    },
    submit3() {
      this.$refs.look3form.validate((valid) => {
        if (valid) {
          console.log(JSON.parse(JSON.stringify(this.look3form)))
          this.tableDataSelect.map((v) => {
            v.orderId = v.id
          })
          console.log(JSON.parse(JSON.stringify(this.tableDataSelect)))
          let json = {
            handOverData: this.look3form,
            handOverPlans: this.tableDataSelect
          }
          handOverInformationsaveResord(json).then((res) => {
            if (res.code == 1001) {
              this.$message({
                message: '交工资料生成成功！',
                type: 'success'
              });
              this.look3Type = false
            }
          })
        } else {
          return false;
        }
      });
    },
    look3Fun() {
      this.look3Type = true
      let arr = []
      this.tableDataSelect.forEach((v) => {
        arr.push({ orderNo: v.code })
      })
      this.look3form.engineeringName = this.$refs.engineeringName.selectedLabel
      this.look3form.engineeringId = this.tableParam.engineeringId
    },
    prinDeriveFun(e) {
      this.look4Type = true
      this.idList = []
      this.tableDataSelect.forEach((v) => {
        this.idList.push({ id: v.id, type: e })
      })
    },
    list1SelectionFun(val) {
      this.tableDataSelect = val;
    },
    /*重置数据*/
    init() {
      this.tableParam.productName = "";
      this.tableParam.status = "";
      this.gettableData();
    },
    open(key, low) {
      this.dialog1 = true
      signOfPrintLog({ id: low.id }).then((res) => {
        this.tableParam1.total1 = res.data.totalRows
        this.table1 = res.data.data
      })
    },
    pagessubmitFromDate() {
      let _this = this;
      _this.$refs.reffromDate.validate((valid) => {
        if (valid) {
          _this.submitFromDate();
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dialogOtherinfo {
  .el-pagination {
    padding: 10px 0;
  }
  .form-title {
    font-size: 18px;
    margin: 10px 0;
  }
}
.el-input,
.el-select {
  width: 240px;
}
/*
 <el-link class="table_link" :underline="false">查看配合比</el-link>*/
.table_link {
  margin: 0 10px;
  color: $bg_color;
  cursor: pointer;
}

.table_link:hover {
  opacity: 0.8;
}
</style>
